<script setup lang="ts">
import { onMounted, ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
import Setting from "./setting.vue";
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import MessageContent from "@/components/Plugins/MessageContent";

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
const videoRef = ref(null);
onMounted(() => {});
</script>

<template>
    <scale-screen
        width="1920"
        height="1080"
        :delay="500"
        :fullScreen="false"
        :boxStyle="{
            background: '#03050C',
            overflow: isScale ? 'hidden' : 'auto',
        }"
        :wrapperStyle="wrapperStyle"
        :autoScale="isScale"
    >
        <div class="custom-container">
            <video class="v-bg" ref="videoRef" src="@/assets/video/bg.mp4" autoplay loop muted></video>
            <div class="content_wrap">
                <Headers />
                <RouterView />
                <MessageContent />
            </div>
            <img class="content-warp-footer" src="@/assets/image/footer-border.png" alt="" srcset="" />
        </div>
    </scale-screen>
    <Setting />
</template>
<style lang="scss" scoped>
.custom-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
.content_wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    padding: 0 25px;
    &::before {
        content: "";
        height: 100%;
        width: 400px;
        background-image: url("@/assets/image/header-border.png");
        background-repeat: no-repeat;
        position: absolute;
        left: -16px;
        top: 0;
        z-index: 2;
    }
    &::after {
        content: "";
        height: 100%;
        width: 400px;
        background-image: url("@/assets/image/header-border.png");
        background-repeat: no-repeat;
        position: absolute;
        right: -16px;
        top: -60px;
        transform-origin: center center;
        transform: rotate(180deg);
        z-index: 2;
    }
}

.v-bg {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.content-warp-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
}
</style>
